<template>
  <el-dialog class="building-editor" :visible="isVisible" :title="buildingForm.id ? '编辑楼宇' : '添加楼宇'" @close="onCloseDialog">
    <el-form ref="buildingFormRef" :model="buildingForm" :rules="buildingRules" size="medium">
      <!-- 楼宇名称 -->
      <el-form-item label="楼宇名称：" prop="name">
        <el-input v-model="buildingForm.name" placeholder="请输入楼宇名称" />
      </el-form-item>
      <!-- 楼宇层数 -->
      <el-form-item label="楼宇层数：" prop="floors">
        <el-input-number v-model="buildingForm.floors" controls-position="right" :min="1" step-strictly placeholder="请输入楼宇层数" />
      </el-form-item>
      <!-- 在管面积 -->
      <el-form-item label="在管面积（m²）：" prop="area">
        <el-input-number v-model="buildingForm.area" :min="0" :controls="false" placeholder="请输入在管面积" />
      </el-form-item>
      <!-- 物业费 -->
      <el-form-item label="物业费（元/m²）：" prop="propertyFeePrice">
        <el-input-number v-model="buildingForm.propertyFeePrice" :min="0" :controls="false" placeholder="请输入物业费单价" />
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" size="medium" @click="onSaveBuilding">确定</el-button>
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updateBuildingAPI, addBuildingAPI } from '@/api/park/building'

export default {
  name: 'BuildingEditor',
  data() {
    return {
      isVisible: false, // 是否显示弹窗
      // 楼宇表单数据
      buildingForm: {
        name: '', // 楼宇名称
        floors: undefined, // 楼宇层数
        area: undefined, // 在管面积
        propertyFeePrice: undefined // 物业费单价
      },
      // 楼宇数据校验规则
      buildingRules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入层数', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开弹窗
    open(row) {
      if (row.id) {
        this.buildingForm = { ...row }
        delete this.buildingForm.status
        delete this.buildingForm.demoFlag
      }
      this.isVisible = true
    },
    // 保存楼宇
    onSaveBuilding() {
      // 校验表单
      this.$refs.buildingFormRef.validate(async valid => {
        if (valid) {
          // 根据id是否存在来判断是添加还是编辑
          if (this.buildingForm.id) {
            // 编辑楼宇
            await updateBuildingAPI(this.buildingForm)
            this.$message.success('编辑成功')
          } else {
            // 添加楼宇
            await addBuildingAPI(this.buildingForm)
            this.$message.success('添加成功')
          }
          // 通知父组件刷新楼宇列表
          this.$emit('update-list')
          this.onCloseDialog()
        }
      })
    },
    onCloseDialog() {
      this.isVisible = false
      // 重置表单
      this.buildingForm = {
        name: '', // 楼宇名称
        floors: undefined, // 楼宇层数
        area: undefined, // 在管面积
        propertyFeePrice: undefined // 物业费单价
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 500px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 50px;
      .el-input-number {
        width: 100%;
        .el-input__inner {
          text-align: left;
        }
      }
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
